<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>jsx小练习</title>
  <!--  引入React核心库-->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!--  引入react-dom,用于支持React操作Dom-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  <!-- 引入babel，用于将jsx转为js-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<script type="text/babel">

  // 1.创建类式组件
  class MyApp extends React.Component {
    // render放在了哪里？———— MyApp 的原型对象上，供实例调用
    //render中的this是谁?— MyApp 的实例对象<=> MyApp 组件实例对象。
    render() {
      return <h1>我是用类定义的组件（适用于【复杂组件】的定义）</h1>
    }
  }
  // 2.渲染组件到页面
  const container = document.getElementById('root');
  const root = ReactDOM.createRoot(container);
  root.render(<MyApp/>);
  // 执行了root.render(<MyApp/>)之后，发生了什么?
  // 1.React解析组件标签,找到了 MyApp 组件。
  // 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
  // 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
</script>
</body>
</html>
